<!--
 * hi-movable-button - 可拖动按钮
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 默认 -->
        <hi-movable-button
            :theme="theme"
            :position="position"
            :text="showText ? '主页' : ''"
            :plain="plain"
            :tint="tint"
            :border="border"
        ></hi-movable-button>

        <!-- 设置主题 -->
        <module-demo title="设置主题">
            <view class="buttons">
                <hi-button class="button" text="默认" @click="theme = ''"></hi-button>
                <hi-button class="button" text="主要" theme="primary" @click="theme = 'primary'"></hi-button>
                <hi-button class="button" text="成功" theme="success" @click="theme = 'success'"></hi-button>
                <hi-button class="button" text="警告" theme="warning" @click="theme = 'warning'"></hi-button>
                <hi-button class="button" text="错误" theme="error" @click="theme = 'error'"></hi-button>
                <hi-button class="button" text="信息" theme="info" @click="theme = 'info'"></hi-button>
            </view>
        </module-demo>

        <!-- 个性化配置 -->
        <module-demo title="个性化配置">
            <view class="buttons">
                <hi-button class="button" text="镂空/切换" @click="plain = !plain" theme="primary"></hi-button>
                <hi-button class="button" text="浅化/切换" @click="tint = !tint" theme="success"></hi-button>
                <hi-button class="button" text="边框/切换" @click="border = !border" theme="warning"></hi-button>
            </view>
        </module-demo>

        <!-- 初始化位置 -->
        <module-demo title="初始化位置" tips="只在初始化时有效，动态更新可能会导致不能拖动，如果必须动态更新，建议更新后通过 v-if 重新渲染组件">
            <view class="buttons">
                <hi-button class="button" theme="primary" text="左上" @click="position = 'left-top'"></hi-button>
                <hi-button class="button" theme="success" text="左中" @click="position = 'left-center'"></hi-button>
                <hi-button class="button" theme="warning" text="左下" @click="position = 'left-bottom'"></hi-button>
                <hi-button class="button" theme="error" text="中上" @click="position = 'center-top'"></hi-button>
                <hi-button class="button" theme="info" text="中中" @click="position = 'center-center'"></hi-button>
                <hi-button class="button" theme="primary" text="中下" @click="position = 'center-bottom'"></hi-button>
                <hi-button class="button" theme="success" text="右上" @click="position = 'right-top'"></hi-button>
                <hi-button class="button" theme="warning" text="右中" @click="position = 'right-center'"></hi-button>
                <hi-button class="button" theme="error" text="右下" @click="position = 'right-bottom'"></hi-button>
            </view>
        </module-demo>

        <!-- 显示文字 -->
        <module-demo title="显示文字">
            <view class="buttons">
                <hi-button class="button" text="显示文字" theme="info" @click="showText = true"></hi-button>
                <hi-button class="button" text="隐藏文字" theme="primary" @click="showText = false"></hi-button>
            </view>
        </module-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 主题
    const theme = ref("");

    // 位置
    const position = ref("right-center");

    // 是否显示文字
    const showText = ref(false);

    // 是否镂空
    const plain = ref(false);

    // 是否边框
    const border = ref(false);

    // 是否浅化
    const tint = ref(false);
</script>

<style lang="scss" scoped>
    .buttons {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
</style>
